<script setup lang="ts">
import type {IBanners} from "~/types/home";

interface IProps {
  banners?: IBanners[]
}

withDefaults(defineProps<IProps>(), {
  banners: () => []
})

const currentIndex = ref(0)
</script>

<template>
  <div class="swiper">
    <el-carousel height="480px">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <img :src="item.picStr" alt="oppo手机图片" class="pic-str">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style lang="scss" scoped>
.swiper {
  position: relative;
  z-index: 100;

  :deep(.el-carousel__button) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-bottom: 20px;
    opacity: .64;
  }

  img {
    width: 100%;
  }
}
</style>
